<template>
  <div class="lr">
    <div class="lr-title">
      <div v-for="(v,index) in tabs" :key="v" :class="['tab-button',{'lractive':currentIndex==index}]"
           @click="toggleLr(index)">{{v}}
      </div>
    </div>
    <keep-alive>
      <component :is="currentView"></component>
    </keep-alive>
    <div class="lr-footer"></div>
  </div>
</template>

<script>
  import login from './login'
  import register from './register'

  export default {
    name: "status",
    components: {
      login,
      register
    },
    data() {
      return {
        tabs: ['登录', '注册'],
        currentView: 'login',
        currentIndex: 0
      }
    },
    methods: {
      toggleLr(index) {
        this.currentIndex = index
        if (index === 0) {
          this.currentView = 'login'
        } else {
          this.currentView = 'register'
        }
      },
    }
  }
</script>

<style scoped lang="less">
  .lr {
    width: 100vw;
    height: 100vh;
    background-color: #e4e3e3;
    border-radius: 6px;

    .lr-title {
      position: relative;
      display: flex;
      justify-content: space-around;
      font-size: 18px;
      font-family: "Microsoft Yahei", serif;
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: url("../assets/img/login_bg.png") no-repeat 0 -5px;
      background-size: 100%;

      .tab-button {
        cursor: pointer;
        padding: 0 20px;
      }
    }

    .lr-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 70px;
      background: url("../assets/img/login_bg.png") no-repeat 0 20px;
      background-size: 100%;
    }
  }

</style>
